<template>
  <div class="water-level">
    <module-head title="平陆运河No.QL6钦江大桥-航道水位深度监测"></module-head>
    <div class="main">
      <div class="sides left">
        <!-- 今日窗口期 -->
        <today-window></today-window>
        <!-- 实时水位变化 -->
        <current-level :date="date"></current-level>
      </div>
      <div class="mid">
        <!-- 热力地图 -->
        <heat-map :handleDataTime="handleDataTime"></heat-map>
      </div>
      <div class="sides right">
        <!-- 未来7日窗口期及主航道水位 -->
        <next-week></next-week>
        <!-- 三维地形图 -->
        <map3d></map3d>
      </div>
    </div>
  </div>
</template>
<script>
import moduleHead from "./components/moduleHead.vue";
import todayWindow from "./components/todayWindow.vue";
import currentLevel from "./components/currentLevel/index.vue";
import nextWeek from "./components/nextWeek/index.vue";
import map3d from "./components/map3d.vue";
import heatMap from "./components/heatMap.vue";
export default {
  components: {
    moduleHead,
    todayWindow,
    currentLevel,
    nextWeek,
    map3d,
    heatMap,
  },
  data() {
    return {
      title: "",
      date: null,
    };
  },
  methods: {
    handleDataTime(v) {
      this.date = v;
    },
  },
};
</script>
<style scoped lang='scss'>
.water-level {
  height: 100%;
  overflow: hidden;
  background: url("~@/assets/waterLevel/bg_alpha.png");
  background-size: 100% 100%;
  .main {
    padding: vh(22px) vw(30px);
    display: flex;
    justify-content: space-between;
    .sides {
      width: vw(420px);
    }
    .mid {
      width: vw(935px);
      animation: fade 6s;
    }
    .left {
      ::v-deep {
        .today-window {
          animation: slide-l 0.8s;
        }
        .current-level {
          animation: slide-l 1.5s;
        }
      }
    }
    .right {
      ::v-deep {
        .next-week {
          animation: slide-r 0.8s;
        }
        .map3d {
          animation: slide-r 1.5s;
        }
      }
    }
    // 左侧入场动画
    @keyframes slide-l {
      0% {
        transform: translateX(-100%);
      }
      80% {
        transform: translateX(20px);
      }
      100% {
        transform: translateX(0);
      }
    }

    // 右侧入场动画
    @keyframes slide-r {
      0% {
        transform: translateX(100%);
      }
      80% {
        transform: translateX(-20px);
      }
      100% {
        transform: translateX(0);
      }
    }

    // 中间淡入动画
    @keyframes fade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
}
</style>
